<template>
  <div class="table-container">
    <div class="search-container" v-if="enabled">
      <input
        class="search-input"
        type="text"
        v-model="inputValue"
        @input="handleInput"
      />
      <label>
        <input type="radio" v-model="searchType" name="radio" value="vague" />
        <span>Vague</span>
      </label>
      <label>
        <input type="radio" v-model="searchType" name="radio" value="regular" />
        <span>Regular</span>
      </label>
    </div>
    <div class="table" v-if="enabled">
      <div
        class="url-container"
        :class="{ focus: current === key }"
        v-for="(item, key) in $store.state.logs"
        :key="key"
        @click="handleSelect(item, key)"
      >
        <div class="icon-container" @click.stop="handleRemove(item.url, key)">
          <svg-icon icon-class="remove" class="icon" />
        </div>
        <span class="index">{{ key + 1 }}:</span>
        <span class="url-span">{{ item.url }}</span>
      </div>
    </div>
    <div class="disabled-container" v-if="!enabled">
      <svg-icon icon-class="disabled" class="icon" />
    </div>
    <div class="footer" v-if="enabled">
      <transition name="fade" mode="out-in">
        <Footer v-if="showFooter" />
      </transition>
    </div>
  </div>
</template>

<script>
import Footer from "./footer";
import { mapGetters } from "vuex";
import { getGlobalSwitchOn } from "@/common/store";

export default {
  components: {
    Footer,
  },
  data() {
    return {
      current: null,
      inputValue: "",
      searchType: "vague",
      enabled: false,
    };
  },
  computed: {
    ...mapGetters(["showFooter"]),
  },
  methods: {
    reload() {
      this.inputValue = "";
    },
    handleRemove(url, key) {
      this.$store.dispatch("remove", {
        url,
        isCurrent: this.current === key,
      });
    },
    handleSelect(target, key) {
      this.current = key;
      this.$store.dispatch("currentClick", target);
    },
    handleInput() {
      this.$store.dispatch("searchLogs", {
        keywords: this.inputValue,
        isReg: this.searchType === "regular",
      });
    },
    async initData() {
      this.enabled = await getGlobalSwitchOn();
    },
  },
  created() {
    this.inputValue = "";
    this.initData();
  },
};
</script>

<style lang="scss" scoped>
@import "~@/styles/index.scss";
.table-container {
  @include set_w_h;
  @include flex_center_column;
  .disabled-container {
    @include set_w_h;
    @include flex_center;
    .icon {
      font-size: 35px;
      opacity: 0.6;
    }
  }
  .search-container {
    @include set_w_h(100%, 50px);
    @include flex_item_center;
    margin: 5px 0;
    .search-input {
      outline-style: none;
      border: 1px solid #ccc;
      border-radius: 3px;
      padding: 5px;
      min-width: 250px;
      margin-left: 10px;
    }
    & > label {
      @include flex_item_center;
      cursor: pointer;
      input {
        width: 50px;
      }
      font-size: 13px;
      font-weight: 600;
    }
  }
  .table {
    @include set_w_h(100%, calc(100% - 48px));
    overflow-x: hidden;
    overflow-y: scroll;
    .url-container {
      position: relative;
      @include set_w_h(100%, 25px);
      @include flex_item_center;
      font-size: 13px;
      color: #333;
      padding: 1px 0 1px 5px;
      background-clip: padding-box;
      border-radius: 5px;
      .icon-container {
        display: none;
        position: absolute;
        z-index: 999;
        border-radius: 3px;
        background-color: #f56c6c;
        .icon {
          font-size: 20px;
          color: $FontFFFColor;
        }
        &:active {
          background-color: rgb(243, 84, 84);
        }
      }
      &:hover {
        .icon-container {
          display: block;
        }
        cursor: pointer;
        background-color: rgba(182, 198, 206, 0.7);
      }
      .index {
        padding: 0 5px;
        font-weight: 600;
      }
      .url-span {
        white-space: nowrap; /*强制span不换行*/
        display: inline-block; /*将span当做块级元素对待*/
        overflow: hidden; /*超出宽度部分隐藏*/
        text-overflow: ellipsis; /*超出部分以点号代替*/
      }
    }
    .focus {
      background-color: rgba(59, 167, 118, 0.8);
      &:hover {
        background-color: rgba(59, 167, 118, 0.8);
      }
    }
  }
  .footer {
    @include set_w_h(100%, calc(80% - 48px));
  }
}
</style>
